* { padding: 0px; margin: 0px; list-style: none; text-decoration: none; }

.clear { clear: both; }

.nav-contain { padding: 20px 0 20px 0; height: 40px; margin-bottom: -0px; z-index: 10000; background: #fff; position: fixed; width: 100%; min-width: 1200px; left: 0; top: 0; -moz-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); -webkit-box-pack: center; position: fixed; width: 100%; }
.nav-contain .logo { float: left; margin-top: -25px; margin-left: -200px; }
.nav-contain .logo a { display: inline-block; }
.nav-contain .logo img { height: 60px; width: 160px; }
.nav-contain .menu { height: 20px; margin-top: 10px; margin-left: 320px; transition: margin-left 0.5s linear; }
.nav-contain .menu.left { margin-left: 120px; transition: margin-left 0.1s linear; }
.nav-contain .menu.left .logo { margin-left: -115px; }
.nav-contain .menu ul { list-style: none; margin-left: 60px; }
.nav-contain .menu ul a:last-child li span { border: none; }
.nav-contain .menu ul li { float: left; color: #333; cursor: pointer; height: 80px; line-height: 80px; margin-top: -30px; }
.nav-contain .menu ul li span { display: inline; border-right: 1px dashed #ccc; padding: 0px 10px; font: 400 15px 'Lato',sans-serif; }
.nav-contain .login-regist { height: 20px; position: absolute; right: 0px; top: 28px; display: none; }
.nav-contain .login-regist form { display: inline-block; }
.nav-contain .login-regist form input { height: 26px; font-size: 14px; width: 126px; outline: none; border: 1px solid #a9a9a9; padding: 0px 2px; vertical-align: middle; }
.nav-contain .login-regist form input:hover { border: 1px solid #6799eb; }
.nav-contain .login-regist form input.login { background: #555; color: #fff; height: 28px; cursor: pointer; border: none; width: 60px; }
.nav-contain .login-regist form input.login:hover { background: #dddddd; }
.nav-contain .login-regist.active { display: block; }
.nav-contain .login-regist a:hover span.regist { background: #dddddd; }
.nav-contain .login-regist span { display: inline-block; padding: 5px 14px; cursor: pointer; font-size: 14px; vertical-align: bottom; }
.nav-contain .login-regist span.regist { color: #fff; }
.nav-contain .login-regist span.testPlay { color: #555; }
.nav-contain .login-finish { position: absolute; right: 30px; top: 15px; display: none; }
.nav-contain .login-finish.active { display: block; }
.nav-contain .login-finish .user-fun { display: inline-block; }
.nav-contain .login-finish .user-fun li { display: inline-block; text-align: center; cursor: pointer; margin-right: 10px; }
.nav-contain .login-finish .user-fun li span { font: 400 15px 'Lato',sans-serif; display: inline-block; color: #333; }
.nav-contain .login-finish .user-fun li span.icon { display: block; width: 38px; height: 30px; }
.nav-contain .login-finish .user-fun li span.icon-1 { background: url("../images/header/icon_1.png") no-repeat; background-size: 90%; background-position-x: 2px; }
.nav-contain .login-finish .user-fun li span.icon-2 { background: url("../images/header/icon_2.png") no-repeat; background-size: 90%; background-position-x: 2px; }
.nav-contain .login-finish .user-fun li span.icon-3 { background: url("../images/header/icon_3.png") no-repeat; background-size: 90%; background-position-x: 2px; }
.nav-contain .login-finish .user-fun li span.icon-4 { background: url("../images/header/icon_4.png") no-repeat; background-size: 90%; background-position-x: 2px; }
.nav-contain .login-finish .user-fun li span.active { color: #dc3836; }
.nav-contain .login-finish .user-info { display: inline-block; }
.nav-contain .login-finish .user-info .login-out { display: inline-block; cursor: pointer; margin-left: 10px; }
.nav-contain .login-finish .user-info .login-out span { font: 400 15px 'Lato',sans-serif; display: inline-block; color: #333; }
.nav-contain .login-finish .user-info .login-out span.icon-login-out { display: block; width: 38px; height: 30px; background: url("../images/header/login_out.png") no-repeat; background-size: 70%; }
.nav-contain .login-finish #avatar-img { width: 48px; height: 48px; display: inline-block; background: url("../images/header/show_avatar.jpg"); background-size: 100%; cursor: pointer; }
.nav-contain .login-finish #avatar-img.a-img-0 { background-position: 0px 0px; }
.nav-contain .login-finish #avatar-img.a-img-1 { background-position: 0px 10%; }
.nav-contain .login-finish #avatar-img.a-img-2 { background-position: 0px 20%; }
.nav-contain .login-finish #avatar-img.a-img-3 { background-position: 0px 30%; }
.nav-contain .login-finish #avatar-img.a-img-4 { background-position: 0px 40%; }
.nav-contain .login-finish #avatar-img.a-img-5 { background-position: 0px 50%; }
.nav-contain .login-finish #avatar-img.a-img-6 { background-position: 0px 60%; }
.nav-contain .login-finish #avatar-img.a-img-7 { background-position: 0px 70%; }
.nav-contain .login-finish #avatar-img.a-img-8 { background-position: 0px 80%; }
.nav-contain .login-finish #avatar-img.a-img-9 { background-position: 0px 90%; }
.nav-contain .login-finish #avatar-img.a-img-10 { background-position: 0px 100%; }
.nav-contain .login-finish .user-info-div { display: inline-block; vertical-align: top; margin-left: 10px; font-size: 14px; margin-top: 4px; }
.nav-contain .login-finish .user-info-div a { text-decoration: none; }
.nav-contain .login-finish .user-info-div .l-f-wallet { padding: 10px; cursor: pointer; }
.nav-contain .login-finish .user-info-div > span { padding-right: 10px; cursor: pointer; }
.nav-contain .avatar-img-contain { position: absolute; background: #fff; width: 930px; padding: 10px; height: 80px; border-radius: 10px; border: 1px solid #e9ecef; left: 50%; margin-left: -460px; top: 82px; display: none; animation: fade-in2 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; -webkit-animation: fade-in2 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; }
.nav-contain .avatar-img-contain.show { display: block; }
.nav-contain .avatar-img-contain .avatar-select-img { width: 80px; height: 80px; display: inline-block; background: url("../images/header/select_avatar.jpg"); background-size: 100%; cursor: pointer; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-0 { background-position: 0px 0px; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-1 { background-position: 0px 10%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-2 { background-position: 0px 20%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-3 { background-position: 0px 30%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-4 { background-position: 0px 40%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-5 { background-position: 0px 50%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-6 { background-position: 0px 60%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-7 { background-position: 0px 70%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-8 { background-position: 0px 80%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-9 { background-position: 0px 90%; }
.nav-contain .avatar-img-contain .avatar-select-img.a-s-img-10 { background-position: 0px 100%; }

.footer-contain { background: #222; height: 400px; width: 100%; min-width: 1200px; }
.footer-contain .footer-c { width: 1200px; height: 100%; margin: 0 auto; }
.footer-contain .footer-c > ul > li { width: 300px; float: left; }
.footer-contain .footer-c > ul > li .f-c-d { padding: 10px; }
.footer-contain .footer-c > ul > li .f-c-d h3 { color: #fff; margin: 30px 0px; }
.footer-contain .footer-c > ul > li .f-c-d .f-c-d-one { color: #828082; line-height: 50px; font-size: 14px; }
.footer-contain .footer-c > ul > li .f-c-d .f-c-d-two li { height: 60px; line-height: 60px; text-align: left; color: #ccc; border-bottom: 1px solid #444444; cursor: pointer; }
.footer-contain .footer-c > ul > li .f-c-d .f-c-d-three li { float: left; margin-right: 10px; margin-bottom: 10px; width: 80px; height: 80px; cursor: pointer; }
.footer-contain .footer-c > ul > li .f-c-d .f-c-d-three li:last-child { width: 160px; height: 80px; color: #828082; }
.footer-contain .footer-c > ul > li .f-c-d .f-c-d-three li:last-child p { margin-top: 10px; }
.footer-contain .footer-c > ul > li .f-c-d .pz-img { width: 50px; height: 50px; background: url("../images/pz_default.png") no-repeat; background-size: 100%; }
.footer-contain .footer-c > ul > li .f-c-d .pz-img:hover { background: url("../images/pz_active.png") no-repeat; background-size: 100%; }
.footer-contain .footer-c-msg { text-align: center; font-size: 14px; color: #828082; padding-top: 10px; clear: both; }

.header_m_hover { height: 0px; width: 100%; background: url("../images/header/header_donw_bg.png") repeat-x; position: absolute; top: 80px; z-index: 10000; overflow: hidden; -webkit-transition: height .6s ease-out; transition: height .6s ease-out; }

.header_m_hover .header_m_hover_c { width: 1200px; min-width: 1200px; max-width: 1200px; margin: 0 auto; position: relative; }
.header_m_hover .header_m_hover_c a { text-decoration: none; }
.header_m_hover .header_m_hover_c ul { position: absolute; z-index: 1; width: 100%; height: 180px; }
.header_m_hover .header_m_hover_c > ul > li { cursor: pointer; position: relative; }
.header_m_hover .header_m_hover_c.lotter { display: none; }
.header_m_hover .header_m_hover_c.lotter li { width: 33%; display: inline-block; height: 280px; list-style: none; }
.header_m_hover .header_m_hover_c.lotter li .header_m_h_img { height: 280px; text-align: center; }
.header_m_hover .header_m_hover_c.lotter li .header_m_h_img .header_m_h_msg { text-align: center; color: #3a404c; font-weight: bold; }
.header_m_hover .header_m_hover_c.real_p { display: none; }
.header_m_hover .header_m_hover_c.real_p li { width: 25%; display: inline-block; height: 280px; position: relative; }
.header_m_hover .header_m_hover_c.real_p li.real_p_rate div { position: absolute; top: 60px; }
.header_m_hover .header_m_hover_c.real_p li img { position: absolute; bottom: 0px; height: 280px; width: 510px; max-width: initial; }
.header_m_hover .header_m_hover_c.ele_play { display: none; }
.header_m_hover .header_m_hover_c.ele_play li { width: 25%; display: inline-block; height: 280px; position: relative; }
.header_m_hover .header_m_hover_c.ele_play li.ele_play_rate div { position: absolute; top: 60px; }
.header_m_hover .header_m_hover_c.ele_play li img { position: absolute; bottom: 0px; height: 280px; width: 510px; max-width: initial; }
.header_m_hover .header_m_hover_c.sport_paly li { width: 25%; display: inline-block; height: 280px; position: relative; }
.header_m_hover .header_m_hover_c.sport_paly li.sport_paly_rate div { position: absolute; top: 60px; }
.header_m_hover .header_m_hover_c.sport_paly li img { position: absolute; bottom: 0px; height: 280px; width: 510px; max-width: initial; }

.skin-set { position: fixed; top: 90px; width: 90px; text-align: center; cursor: pointer; left: -50px; transition: left .5s ease; -moz-transition: left .5s ease; -webkit-transition: left .5s ease; -o-transition: left .5s ease; z-index: 1000; }
.skin-set.active { left: 0px; transition: left .5s ease; -moz-transition: left .5s ease; -webkit-transition: left .5s ease; -o-transition: left .5s ease; }
.skin-set .skin-set-img { width: 40px; height: 40px; position: absolute; right: 0px; top: 0px; }
.skin-set .skin-kf-bg { width: 38px; height: 38px; position: absolute; top: 40px; left: 50px; background: #fff; }
.skin-set .skin-kf-bg div { width: 40px; height: 40px; }
.skin-set .skin-ewm-bg { width: 38px; height: 38px; position: absolute; top: 80px; left: 50px; background: #fff; }
.skin-set .skin-ewm-bg div { width: 40px; height: 40px; }
.skin-set .skin-d { width: 20px; height: 20px; margin-top: 10px; -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; }
.skin-set .skin-color-select { width: 50px; height: 100px; background: #fff; padding-top: 10px; }
.skin-set .skin-color-select span { width: 20px; height: 20px; display: block; margin: 0px auto 10px; }

@-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-webkit-keyframes fade-in2 { 0% { margin-top: -50px; visibility: hidden; opacity: 0; }
  100% { margin-top: 0px; visibility: visible; opacity: 1; } }
@keyframes fade-in2 { 0% { margin-top: -50px; visibility: hidden; opacity: 0; }
  100% { margin-top: 0px; visibility: visible; opacity: 1; } }
